<template>
    <div>
        <van-nav-bar class="custom-nav-bar" title="邀请好友" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="invite">
            <img src="@/assets/img/yqhy.jpg" alt="">
            <div class="card">
                <p class="title">我的奖励</p>
                <div class="content">
                    <div>已邀请好友（人）
                        <p>15</p>
                    </div>
                    <div>已发放红包（元）
                        <p>86</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <p class="title">我的好友</p>
                <div class="person">
                    <div class="top">
                        <div class="left">
                            <img src="../../assets/img/l_tx.png" alt="">
                        </div>
                        <div class="right">
                            霍元甲
                            <p class="time">注册时间:2021-7-1 12:43</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">已获得红包10元红包</div>
                        <div class="right"><span style="color: #888;">状态:</span>成功注册</div>
                    </div>
                </div>
                <div class="person">
                    <div class="top">
                        <div class="left">
                            <img src="../../assets/img/l_tx.png" alt="">
                        </div>
                        <div class="right">
                            霍元甲
                            <p class="time">注册时间:2021-7-1 12:43</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left">已获得红包10元红包</div>
                        <div class="right"><span style="color: #888;">状态:</span>成功注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const onClickLeft = () => {
    router.push('/');
}
</script>
<style lang="less" scoped>
.invite {
    width: 100%;
    height: 130vh;
    background-color: #f5f5f5;

    img {
        width: 100%;
        height: 700px;
        margin-bottom: 20px;
    }

    .card {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0 0 10px #ccc;
        padding: 25px;
        text-align: center;

        .title {
            margin-bottom: 30px;
        }

        .content {
            background: #FFF8EF;
            border-radius: 20px;
            box-shadow: 0 0 10px #ccc;
            padding: 25px;
            display: flex;
            justify-content: space-between;

            div {
                width: 50%;
                font-size: 27px;
                color: #888;
                height: 120px;

                p {
                    font-size: 45px;
                    color: #FF5822;
                    font-weight: bold;
                    margin-top: 20px;
                }
            }

            div:first-child {
                border-right: 1px solid #ccc;
            }
        }
    }

    .card {
        .person {
            background: #f5f5f5;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 30px;

            .top {
                display: flex;
                justify-content: space-between;
                padding-bottom: 20px;
                border-bottom: 1px solid #ccc;

                .left {
                    width: 120px;
                    height: 120px;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;

                    }
                }

                .right {
                    text-align: start;
                    width: 77%;

                    .time {
                        margin-top: 5px;
                        font-size: 25px;
                        color: #ccc;
                    }
                }
            }

            .bottom {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;

                .left {
                    font-size: 27px;
                    color: #FF5822;

                }

                .right {
                    font-size: 27px;
                }
            }
        }
    }
}
</style>